<template>
	<div class="my-goods-list">
		<MyTable :arr="arr">
			<template #haed>
				<tr>
				<th>#</th>
				<th>商品名称</th>
				<th>价格</th>
				<th>标签</th>
				<th>操作</th>
			</tr>
			</template>

			<template #body="scpad">
				<td>{{scpad.obj.id}}</td>
				<td>{{scpad.obj.goods_name}}</td>
				<td>{{scpad.obj.goods_price}}</td>
				<td>
					<div>
						<!-- 输入框 -->
						<input style="width: 150px" class="tag-input form-control" type="text" v-model.trim="scpad.obj.inputValue" v-if="scpad.obj.inputVisible" v-focus @blur="scpad.obj.inputVisible=false" @keyup.esc="scpad.obj.inputValue=''" @keyup.enter="addFn(scpad.obj)"/>


						<button class="btn btn-primary btn-sm add-tag" v-else @click="scpad.obj.inputVisible=true" >
							+Tag
						</button>
					</div>
					<span class="badge bg-info text-dark" v-for="(item,index) in scpad.obj.tags" :key="index">{{item}}</span>
					
				</td>
				<td><button class="btn btn-danger btn-sm" @click="del(scpad.obj.id)">删除</button></td>
			</template>
		</MyTable>
	</div>
</template>

<script>
	// 接口：GTE  https://www.escook.cn/api/goods
 import axios from 'axios'
 import MyTable from '@/components/MyTable.vue';
	export default {
		data() {
			return {
				arr:[],
			};
		},
		async created(){
		const {data:res} =	await axios.get('https://www.escook.cn/api/goods')
		console.log(res);
		this.arr=res.data
		},
		components:{
			MyTable,
		},
		directives:{
			focus:{
				inserted(val){
					val.focus()
				}
			}
		},
		methods:{
			del(id){
				this.arr=this.arr.filter(item=>item.id!==id)
			},
			addFn(obj){

				obj.tags.push(obj.inputValue)

				obj.inputValue=''
			}
		}
	};
</script>

<style>
</style>
